<template>
    <div class="container">
    <div class="row">
      <div class="col-md-3 col-12 my-5"  v-for="dataItem in articleData" :key="dataItem.articleid">
        <div class="card">
        <div class="photo">
            <img src="../assets/test.jpg" alt="">
        </div>
        <h1>{{ dataItem.articlename }}</h1>
        <h2>{{ dataItem.articleuser }}</h2>
        <p>{{ dataItem.articlecontent }}</p>
        <button @click="toDetails(dataItem.articleid)">查看具体帖子</button>
        </div>
      </div>
    </div>
    </div>
</template>

<script>
export default {
    name :"ForumContent",
    data(){
        return{
            articleData:[],
            articletotal:0,
            query: {
                page:1,
                size:12,
                articlename:"",
                articleuser:"",
                articlecontent:"",
                },
            forum:{
                articleid:"",
                articlename:"",
                articleuser:'',
                articlecontent:'',
                articletime:'',
                articlestatus:0
            },
        }  
    },
    mounted(){
        this.getarticleList();
    },
    methods:{
        getarticleList(){
            console.log("调用了")
            this.axios.get("http://localhost:8001/article/getarticleList",{
                params:{
                    page:this.query.page,
                    size:this.query.size,
                    articlename:this.query.articlename,
                    articleuser:this.query.articleuser,
                    articlecontent:this.query.articlecontent,
                }
            }).then((resp)=>{
                this.articleData = resp.data.content.list,
                this.total = resp.data.content.total;
                console.log(this.articleData)
            })
        },
        handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.query.size = val;
                this.getList();
            },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.query.page = val;
            this.getList();
        },
        toDetails(articleId) {
        console.log(articleId)
        this.$router.push({
            path: `/ForumDetails/${articleId}`,
        });
        },
    }
}
</script>

<style scoped>
*{
    margin: 0;
    padding: 0;
}

body{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(200deg,#517fa4,#243949);
}

.card{
    position: relative;
    width: 300px;
    height: 450px;
    margin: 20px;
    background-color: #758a99;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fff;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
    flex-shrink: 0;

}
.card .photo img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card .photo{
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 0%;
    overflow: hidden;
    transition: 0.3s;   
}

.card:hover .photo{
    top: 30px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
}

.card .photo::before{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom,transparent 50%,#222);
}

.card h1{
    position: absolute;
    top: 370px;
    transition: 0.5s;
}

.card:hover h1{
    top: 170px;
}

.card h2{
    margin-top: 220px;
    width: 80%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 20px;
    text-align: center;
    margin-bottom: 20px;
    padding-bottom: 20px;
}

.card p {
    width: 90%;
    text-indent: 32px;
    font-size: 16px;
    margin-bottom: 15px;
    line-height: 30px;
}

.card button{
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.5);
    padding: 8px 32px;
    border-radius: 8px;
}
.card button:hover{
    color: #fff;
    background-color: rgba(255, 255, 255, 0.2);
}
</style>